<template>
  <div class="target-table" id="target-table">
    <div class="title-box">
      <p class="page-title">{{title}}关键业务环节数字化覆盖表_目标表更新_{{reportCycle}}</p>
      <RPButton v-if="!!updateList.length" type="info" optType="create" text="保存修改" @click="updataInfo"></RPButton>
    </div>

    <p class="route-p"><span class="router-title" @click="goTargerPage">{{title}}{{reportCycle}}关键业务环节数字化覆盖表现状表</span>更新将引起目标表变化，请您编辑更新以下目标表</p>

    <shareTable  v-if="showTable" :edit="true" :columns="headerData" :height="tableHeight" :tableData="tableData" @cellClick="tableCellClick"></shareTable>
  </div>
</template>

<script>
import shareTable from '@/components/shareTable'
import coverApi from '@/api/cover.js'
export default {
  name: 'targetTableUpdate',
  components: { shareTable },
  data() {
    return {
      title: '华润啤酒',
      reportCycle: '2023H1',
      showTable: false,
      headerData: [],
      tableHeight: 0,
      tableData: [],
      updateList: [],
    }
  },
  mounted() {
    this.tableHeight = document.getElementById('target-table').clientHeight - 150
    window.onresize = () => {
      return (() => {
        this.tableHeight = document.getElementById('target-table').clientHeight - 150
      })()
    }
    let params = this.$route.params
    let bindId = params.bindId || ''
    coverApi.gatTableInfo({bindId: bindId}).then(res=> {
      let info = res.data.data[0]
      this.trgNode = info.trgNode
      this.title = info.trgNode
      this.rptType = info.rptType
      this.reportCycle = info.reportCycle
      this.pageLoading = false
    })
    coverApi.getwfRptDgcalHrhxDetail({
      bindId,
      operateId: '',
      trgNode: '',
      reportCycle: '',
    }).then(res => {
      this.headerData = res.data.data.tableColumn
      this.headerData.forEach(item => {
        this.columnFixed(item.children, item)
      })
      this.tableData = res.data.data.tableData
      this.showTable = true
    })
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    updataInfo() {
      this.loading = true
      coverApi.updateTargetTable(this.updateList).then(res => {
        if(res.data.data){
          this.$Message.success({
              content: '修改保存成功！',
              duration: 3
          })
          this.updateList = []
        } else {
          self.$Message.error({
            content: '修改保存失败！',
            duration: 3
          })
        }
        this.loading = false
      })
    },
    tableCellClick(data) {

      if (!data.row[data.column.property].edit) {
        return false
      }
      if (this.loading) {
        self.$Message.error({
          content: '修改保存中，请稍后修改',
          duration: 3
        })
        return false
      }
      let text = ''
      if (data.row[data.column.property].value == 1) {
        text = 0
      }
      if (data.row[data.column.property].value == 0) {
        text = '-'
      }
      if (data.row[data.column.property].value == '-') {
        text = 1
      }
      if (this.updateList.find(item => item.company == data.row.company.value 
      && item.dpt == data.row.dpt.value
      && item.fieldName == data.column.property)) {
        this.updateList.forEach(item => {
          if (item.company == data.row.company.value 
      && item.dpt == data.row.dpt.value
      && item.fieldName == data.column.property) {
            item.fieldVale = text
          }
        })
      } else {
        this.updateList.push({
          "company": data.row.company.value,
          "dpt": data.row.dpt.value,
          "fieldName": data.column.property,
          "fieldVale": text,
          "trgNode": this.title,
          bindId: this.$route.query.bindId
        })
      }
      data.row[data.column.property].value = text
    },
    goTargerPage() {
      window.open(`${window.location.origin}/#/special-work?bindId=${this.$route.params.bindId}&type=status`)
    },
    columnFixed(data, baseData) {
      let isFixed = !!data && !!data.find(item => item.fixed)
      if (isFixed) {
        baseData.fixed = true
      } else {
        data && data.forEach(child => {
          this.columnFixed(child.children, baseData)
        });
      }
    },
  }
}
</script>
<style lang="less" scoped>
.page-title {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding: 5px 10px;
}
.route-p {
  padding: 20px 10px;
}
.router-title {
  color: #1e89db;
  cursor: pointer;
}
.title-box {
  display: flex;
  justify-content: space-between;
}
</style>
